<template>
  <div class="popup">
    <transition name="fade">
      <div class="popup-mask" @click="close" v-show="show"></div>
    </transition>
    <transition :name="'slide-' + position">
      <div
        class="popup-content"
        :style="contentStyles()"
        v-show="show"
        ref="contentRef"
      >
        <slot />
      </div>
    </transition>
  </div>
</template>

<script>
//props postion bottom,left,right,top
export default {
  data() {
    return {
      show: this.visible,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String,
      default: "bottom",
    },
  },
  watch: {
    visible(val) {
      this.show = val;
    },
  },
  methods: {
    close() {
      this.show = false;
      this.$emit("input", false);
    },
    contentStyles() {
      switch (this.position) {
        case "top":
          return {
            width: "100%",
            top: 0,
            left: 0,
          };
        case "bottom":
          return {
            width: "100%",
            bottom: 0,
            left: 0,
          };
        case "left":
          return {
            height: "100%",
            left: 0,
            bottom: 0,
          };
        case "right":
          return {
            height: "100%",
            right: 0,
            bottom: 0,
          };
      }
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.slide-top-enter-active,
.slide-top-leave-active,
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition: all 0.3s ease;
}
.slide-top-enter,
.slide-top-leave-to {
  transform: translateY(-100%);
}
.slide-bottom-enter,
.slide-bottom-leave-to {
  transform: translateY(100%);
}
.slide-right-enter,
.slide-right-leave-to {
  transform: translateX(100%);
}
.slide-left-enter,
.slide-left-leave-to {
  transform: translateX(-100%);
}
.popup {
  .popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }
  .popup-content {
    position: fixed;
    z-index: 1001;
  }
}
</style>